<template>
  <div class="module-statistics">
    <!-- 搜索栏 -->
    <div class="mb-4 flex items-center gap-4">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="w-80"
      />
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>

    <!-- 统计图表 -->
    <div class="chart-container h-96">
      <ArtBarChart
        :data="chartData"
        :xAxisData="xAxisData"
        :loading="loading"
        :title="'模块访问统计'"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 日期范围
const dateRange = ref([])

// 图表数据
const loading = ref(false)
const chartData = ref([130, 186, 113, 154, 287, 305, 145, 190, 261])
const xAxisData = ref([
  '运行监控管理',
  '质量检测管理',
  '数据备份处理',
  '系统管理',
  '主数据管理',
  '数据共享接口',
  '首页',
  '元数据管理',
  '代码标准管理'
])

// 搜索方法
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}
</script>

<style scoped>
.module-statistics {
  .chart-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
  }
}
</style> 